// console.log(document.querySelector(".outer"));
// 一、渲染手机的详细信息
// console.log(goodData);
var priceAreaEle = document.querySelector(".priceArea")
function renderDetail(detailData){
    priceAreaEle.innerHTML = "";
    priceAreaEle.innerHTML = `<h3 class="title">${detailData.title}</h3>
    <p class="con1">${detailData.recommend}</p>
    <div class="price">
        <div class="priceDetail">
            <p>价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格</p>
            <p>￥ <span>${detailData.price}</span> 元</p>
        </div>
        <div class="buy">
            <p>促&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销</p>
            <p><span>${detailData.promoteSales.type}</span>${detailData.promoteSales.content}</p>
        </div>
    </div>
    <div class="support">
        <div class="supportDetail">
            <p>支&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;持</p>
            <p>${detailData.support}</p>
        </div>
        <div class="address">
            <p>配&nbsp;送&nbsp;至</p>
            <p>${detailData.address}</p>
        </div>
    </div>`;
}

renderDetail(goodData.goodsDetail)



// 二、渲染手机规格 

// 获取规格需要存放的容器 
var chooseAreaEle = document.querySelector(".chooseArea");
function renderPhoneType(data){
    // 先把存放规格的容器清空
    chooseAreaEle.innerHTML = "";
    data.forEach(function(item){
        // 创建dl元素
        var dlEle = document.createElement("dl");
        var dtEle = document.createElement("dt");
        dtEle.innerHTML = item.title;
        dlEle.appendChild(dtEle);
        item.data.forEach(function(val){
            var ddEle = document.createElement("dd");
            ddEle.innerHTML = val.type;
            dlEle.appendChild(ddEle);
        })
        console.log(dlEle);
        chooseAreaEle.appendChild(dlEle);
    })
}

renderPhoneType(goodData.goodsDetail.crumbData);


// 选中 规格按钮 会高亮 ；

// 先获取 内容 ，然后再绑定事件

var  dlEles = chooseAreaEle.querySelectorAll("dl");  // 获取每一行的元素；
// 通过数据 显示选中的规格视图 ；
var chooseInsertEle = document.querySelector(".chooseInsert");
var arr = [];//  存放 选择的 行元素；
// console.log(dlEles);
// 循环 每一行元素 ， 在每一行元素里获取 dd
dlEles.forEach(function(dlEle){
    // 在每一个dl里获取 dd 元素
    var ddEles = dlEle.querySelectorAll("dd");

    // 初始化数组里的内容  ，初始化选择规格 ；
    dlEle.chioseType = ddEles[0].innerHTML;  // 把 每一行元素里添加 第一个dd的内容
    if(arr.indexOf(dlEle)==-1){
        arr.push(dlEle);
    }
    ddEles.forEach(function(ddEle){
        ddEle.onclick = function(){
            // console.log("点击了dd按钮");
            // 把当前行 里的所有 dd 的颜色变成灰色 
            ddEles.forEach(function(item){
                item.style.color = "#666";
            })
            // 把当前点击的dd 字体的颜色改成红颜色；
            this.style.color = "red";

            // 当点击dd的时候 给 dlEle 元素 绑定属性 
            dlEle.chioseType = this.innerHTML;
            if(arr.indexOf(dlEle)==-1){
                arr.push(dlEle);
            }
            
            console.log(arr);
            renderShowType(arr);
        }
    })
})
renderShowType(arr);




function renderShowType(arr){
    chooseInsertEle.innerHTML = "";
    arr.forEach(function(item){
        var markEle = document.createElement("mark");
        markEle.innerHTML = item.chioseType;
        var aEle = document.createElement("a");
        aEle.innerHTML = "X";
        markEle.appendChild(aEle);
        chooseInsertEle.appendChild(markEle);
    })
}
